<template>
	<view class="phbbox2" @touchstart="touchStart" @touchend="touchEnd">
		<view class="db_box">
			<!-- 顶部标题 -->
			<view class="bt_box">
				<view class="item">活动编码</view>
				<view class="item">活动名称</view>
				<view class="item">兑奖码</view>
				<view class="item">获取时间</view>
			</view>
			<!-- 列表每一项 -->
			<view class="item_box" v-for="(item, index) in list_code" :key="index">
				<view class="item_box_item">{{ item.id }}</view>
				<view class="item_box_item">{{ item.task.name }}</view>
				<view class="item_box_item">{{ item.code }}</view>
				<view class="item_box_item wsn" style="font-size: 12rpx">
					{{ item.create_time }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		drawCodeList,
		csdrawCodeList
	} from "@/api/task";
	import moment from 'moment';
	export default {
		data() {
			return {
				list_code: [],
				page: 1,
				num: 20
			}
		},

		methods: {
			init() {
				let res = uni.getStorageSync('task_info');
				console.log(res);
				const state = res.status;
				if (state == 0) {
					this.csdrawCodeListfn();
				} else {
					this.drawCodeListfn();
				}
			},
			async csdrawCodeListfn() {
				let res = await csdrawCodeList({
					id: id,
					page: this.page,
					num: this.num,
					istest
				});
				console.log(res.data.list, "中奖码列表");
				this.list_code = res.data.list;
				this.list_code.forEach((item, index) => {
					item.create_time = this.convertDateFormat(item.create_time);
				});
			},
			async drawCodeListfn() {
				let id = uni.getStorageSync('task_info').id;
				let res = await drawCodeList({
					id: id,
					page: this.page,
					num: this.num
				});
				console.log(res.data.list, "中奖码列表");
				this.list_code = res.data.list;
				this.list_code.forEach((item, index) => {
					item.create_time = this.convertDateFormat(item.create_time);
				});
			},
			convertDateFormat(val) {
				return moment(val).format('YYYY-MM-DD');
			},
			touchStart() {},
			touchEnd() {
				this.num += 20;
				this.init();
			}
		},
		created() {
			this.init();
		}
	};
</script>

<style lang="scss" scoped>
	.phbbox2 {
		background: #ffffff;
		// box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(0, 0, 0, 0.16);
		min-height: calc(100vh - 90rpx);
		width: 100%;
		margin-top: 26rpx;

		.db_box {
			padding-bottom: 30rpx;
			background-color: #F4F8FD;
			border-radius: 8rpx;

			.bt_box {
				display: flex;
				width: 100%;
				font-size: 28rpx;
				color: #000;
				border-bottom: 1rpx solid #707070;
				padding: 20rpx 0;

				.item {
					flex: 1;
					font-weight: 500;
					text-align: center;
				}
			}

			.item_box {
				padding: 10rpx 20rpx;
				display: flex;
				position: relative;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #C6C6C6;

				.item_box_item {
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.wsn {
				white-space: normal !important;
			}
		}

		.tou_box {
			display: flex;
			padding-top: 20rpx;

			.item1 {
				flex: 1;
				padding-top: 20rpx;

				.jf {
					font-size: 40rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					text-align: center;
					margin-top: 20rpx;
				}

				.text_name {
					font-size: 28rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					display: flex;

					.name_zuo {
						margin-left: 5rpx;
						width: 40%;
						text-align: right;
						margin-right: 8rpx;
					}

					.name {
						width: 60%;
					}
				}

				.tou_img1 {
					width: 145rpx;
					height: 145rpx;
					border: 4rpx solid #375ccd;
					border-radius: 50%;
					margin: 0 auto;
					margin-bottom: 50rpx;
					position: relative;

					.tou_img_z {
						width: 52rpx;
						height: 60rpx;
						position: absolute;
						bottom: -45rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

			.item2 {
				flex: 1;

				.jf {
					font-size: 40rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					text-align: center;
					margin-top: 20rpx;
				}

				.text_name {
					font-size: 26rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					display: flex;

					.name_zuo {
						margin-left: 5rpx;
						width: 40%;
						text-align: right;
						margin-right: 8rpx;
					}

					.name {
						width: 60%;
					}
				}

				.tou_img1 {
					width: 165rpx;
					height: 165rpx;
					border: 4rpx solid #375ccd;
					border-radius: 50%;
					margin: 0 auto;
					margin-bottom: 50rpx;
					position: relative;

					.tou_img_z {
						width: 52rpx;
						height: 60rpx;
						position: absolute;
						bottom: -45rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

			.item3 {
				flex: 1;
				padding-top: 20rpx;

				.jf {
					font-size: 40rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					text-align: center;
					margin-top: 20rpx;
				}

				.text_name {
					font-size: 26rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					display: flex;

					.name_zuo {
						margin-left: 5rpx;
						width: 40%;
						text-align: right;
						margin-right: 8rpx;
					}

					.name {
						width: 60%;
					}
				}

				.tou_img1 {
					width: 145rpx;
					height: 145rpx;
					border: 4rpx solid #375ccd;
					border-radius: 50%;
					margin: 0 auto;
					margin-bottom: 50rpx;
					position: relative;

					.tou_img_z {
						width: 52rpx;
						height: 60rpx;
						position: absolute;
						bottom: -45rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
</style>